<template>
  <div class="main-container">
    <!-- 左侧知识库区域 -->
    <div class="knowledge-sidebar" :class="{ 'collapsed': isSidebarCollapsed }">
      <div class="collapse-btn" @click="toggleSidebar">
        <i :class="isSidebarCollapsed ? 'el-icon-caret-left' : 'el-icon-caret-right'"></i>
      </div>
      <div class="sidebar-content" v-show="!isSidebarCollapsed">
        <div class="knowledge-title">
          <h3>知识库信息</h3>
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="openCreateDialog">
            新建
          </el-button>
        </div>

        <div class="current-knowledge" v-if="currentKnowledge">
          <i class="el-icon-folder-checked"></i>
          当前知识库：{{ currentKnowledge.name }} ({{ currentKnowledge.dataType === '1' ? '私有' : '公开' }})
        </div>

        <template v-if="knowledgeList.length > 0">
          <div v-for="item in knowledgeList" :key="item.id" class="knowledge-card"
            :class="{ active: currentKnowledge && currentKnowledge.id === item.id }" @click="selectKnowledge(item)">
            <div class="card-header">
              <i :class="item.dataType === '1' ? 'el-icon-lock' : 'el-icon-share'"></i>
              <div class="card-title">{{ item.name }}</div>
            </div>

            <div class="card-content">
              <div class="card-meta">
                <span>类型: {{ item.dataType === '0' ? '公开' : '私有' }}</span>
                <span>状态:
                  <el-tag size="mini" :type="item.status === '0' ? 'success' : 'danger'">
                    {{ item.status === '0' ? '启用' : '禁用' }}
                  </el-tag>
                </span>
              </div>
              <div class="card-meta">

                <span>创建: {{ formatDate(item.createTime) }}</span>
              </div>
            </div>

            <div class="card-actions">
              <el-button size="mini" icon="el-icon-edit" @click.stop="openEditDialog(item)"></el-button>
              <el-button size="mini" type="danger" icon="el-icon-delete" @click.stop="confirmDelete(item)"></el-button>
            </div>
          </div>
        </template>

        <div v-else class="empty-knowledge">
          <i class="el-icon-folder-opened"></i>
          <p>暂无知识库</p>
          <p style="font-size: 13px; margin-top: 10px;">点击上方按钮创建您的第一个知识库</p>
        </div>
      </div>
    </div>
    <div class="doc-container">
      <div style="flex: 1;width: 100%;">
        <el-card shadow="never">
          <div slot="header" style="display: flex;align-items: center;justify-content: space-between;height: 40px;">
            <n-title title="文档智脑" style="margin-left: 20px;"/>
            <div style="display: flex;align-items: center;gap: 15px;">
              <!-- 新增搜索框 -->
              <el-input v-model="searchKeyword" placeholder="输入关键词搜索" clearable style="width: 300px;"
                @keyup.enter.native="handleSearch" @clear="handleSearch">
                <el-button slot="append" icon="el-icon-search" style="color: green;" @click="handleSearch" />
              </el-input>

              <div class="compact-upload">
                <el-upload class="upload-demo" :multiple="false" :show-file-list="false" :before-upload="beforeUpload"
                  :http-request="handleUpload" :name="'file'" :action="''">
                  <el-button type="primary" icon="el-icon-upload" class="upload-btn">
                    点击上传文档
                  </el-button>
                </el-upload>
              </div>
            </div>
          </div>
          <el-row :gutter="20" class="file-list">
            <el-col v-if="loading" :span="24">
              <div style="text-align: center; padding: 20px;">
                <i class="el-icon-loading" style="font-size: 24px;"></i>
                <p>正在加载文档...</p>
              </div>
            </el-col>

            <template v-else>
              <el-col v-for="file in fileList" :key="file.id" :xs="24" :sm="12" :md="8" :lg="6" class="file-item">
                <file-card :file="file" @preview="handlePreview" @download="handleDownload" @delete="handleDelete"
                  :preview-loading="previewLoadingMap[file.id]" />
              </el-col>
            </template>
          </el-row>
        </el-card>

        <el-pagination background layout="total, sizes, prev, pager, next, jumper" :current-page="currentPage"
          :page-sizes="[8, 12, 24, 48]" :page-size="pageSize" :total="total" @current-change="handlePageChange"
          @size-change="handleSizeChange" style="margin-top: 20px; padding: 10px 0; justify-content: flex-end;" />
      </div>
    </div>
    <file-view-dialog :options="fileOptions" />
    <!-- 创建/编辑知识库对话框 -->
    <el-dialog :title="isEditing ? '编辑知识库' : '新建知识库'" :visible.sync="dialogVisible" width="600px"
      :close-on-click-modal="false">
      <el-form :model="form" :rules="rules" ref="knowledgeForm" label-width="120px" label-position="right">
        <el-form-item label="知识库名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入知识库名称"></el-input>
        </el-form-item>

        <el-form-item label="知识库类型" prop="dataType">
          <el-radio-group v-model="form.dataType">
            <el-radio label="1">私有知识库</el-radio>
            <el-radio label="0">公开知识库</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="状态" prop="status">
          <el-switch v-model="form.status" active-value="0" inactive-value="1" active-text="启用"
            inactive-text="禁用"></el-switch>
        </el-form-item>

        <el-form-item label="描述信息" prop="description">
          <el-input type="textarea" :rows="3" v-model="form.description" placeholder="请输入知识库描述信息"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Ref } from 'vue-property-decorator';
import { ElUploadInternalRawFile } from 'element-ui/types/upload';
import { getDocuments, deleteDocument, getDocumentFile, createDocumentWithProcessRule, getDocumentStatus } from '@/api/difyLib'
import NTitle from "@/components/NTitle.vue";
import FileCard from '@/views/app/components/FileCard.vue'
import FileViewDialog from '@/components/FileViewDialog.vue';
import { create, getUserKnowledge, update ,remove} from '@/api/knowledge';

interface FileItem {
  id: string;
  fileName: string;
  fileSize: number;
  uploadTime: string;
  fileType: string;
  indexing_status: string;
  progress: number;
  download_url: string; // 新增下载链接
  preview_url: string;  // 新增预览链接
}
@Component({
  methods: {},
  components: { NTitle, FileCard, FileViewDialog }
})
export default class docLibrary extends Vue {

  @Ref('knowledgeForm') knowledgeForm;
  private fileList: any = [];
  private currentPage = 1;     // 当前页码
  private pageSize = 8;      // 每页数量
  private total = 0;          // 总条目数
  private loading = false;   // 加载状态
  private pollingInterval: number | null = null;
  private searchKeyword = '';

  // 新增状态变量
  private isSidebarCollapsed = false;
  currentKnowledge: any = {};
  knowledgeList: any = [];
  isEditing = false;
  dialogVisible = false;
  fileOptions: any = {
    dialogVisible: false,
    url: '',
    title: '文件预览',
    type: 'download',
    limit: 5,

  };

  form: any = {
    id: null,
    name: '',
    code: '',
    dataType: '1',
    status: '0',
    description: ''
  }

  // 表单验证规则
  rules = {
    name: [
      { required: true, message: '请输入知识库名称', trigger: 'blur' },
      { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
    ],
    dataType: [
      { required: true, message: '请选择知识库类型', trigger: 'change' }
    ]
  };

  // 切换侧边栏状态
  private toggleSidebar() {
    this.isSidebarCollapsed = !this.isSidebarCollapsed;
    // 可选：保存状态到本地存储
    localStorage.setItem('sidebarCollapsed', JSON.stringify(this.isSidebarCollapsed));
  }

  // 打开创建对话框
  openCreateDialog() {
    // 检查是否已达到最大数量限制
    const privateExists = this.knowledgeList.some(item => item.dataType === '1');
    const publicExists = this.knowledgeList.some(item => item.dataType === '0');

    if (privateExists && publicExists) {
      this.$message.warning('每个用户只能创建一个私有和一个公开知识库');
      return;
    }

    this.isEditing = false;
    this.form = {
      id: null,
      name: '',
      code: '',
      dataType: '0',
      dataId: '',
      status: '0',
      description: ''
    };

    // 根据现有知识库自动设置类型
    if (!privateExists && publicExists) {
      this.form.dataType = '0';
    } else if (privateExists && !publicExists) {
      this.form.dataType = '1';
    }

    this.dialogVisible = true;
  }
  private searchDebounce: number | null = null;
  // 获取文件类型图标
  private getFileIcon(filename: string): string {
    const ext = filename.split('.').pop()?.toLowerCase() || '';
    switch (ext) {
      case 'pdf': return 'el-icon-document-pdf';
      case 'doc':
      case 'docx': return 'el-icon-document-word';
      default: return 'el-icon-document';
    }
  }



  // 打开编辑对话框
  openEditDialog(row) {
    this.isEditing = true;
    this.form = { ...row };
    this.dialogVisible = true;

    this.$nextTick(() => {
      if (this.knowledgeForm) {
        this.knowledgeForm.clearValidate();
      }
    });
  }
  // 辅助方法
  formatDate(timestamp) {
    if (!timestamp) return '';
    const date = new Date(timestamp);
    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
  }

  // 选择知识库
  selectKnowledge(knowledge) {
    this.currentKnowledge = knowledge;
    this.loadDocuments();
  }

  private async handleUpload(file: any) {
    try {
      //const datasetId: any = process.env.VUE_APP_DATASET_ID
      const datasetId = this.currentKnowledge.code;
      // 构造预处理规则配置
      const processRuleConfig: any = {
        indexing_technique: "high_quality" as const,
        mode: "custom" as const,
        preProcessingRules: [
          { id: "remove_extra_spaces", enabled: true },
          { id: "remove_urls_emails", enabled: true }
        ],
        segmentation: {
          separator: "###",
          max_tokens: 500,
          chunk_overlap: 50
        },
        doc_form: "text_model", // 新增必填字段
        doc_language: "Chinese" // 根据模式选择
      }
      const actualFile = file.file
      const response = await createDocumentWithProcessRule(datasetId, {
        file: actualFile,
        processRule: processRuleConfig
      })

      // 处理响应数据
      const newDocument = {
        id: response.data.document.id,
        name: response.data.document.name,
        status: response.data.document.indexing_status,
        progress: this.calculateProgress(response.data.document.display_status),
        // 其他需要展示的字段...
      }
      this.fileList.unshift(newDocument)
      this.$message.success('文档上传成功，开始处理...')
      // 获取批次号
      const batch = response.data.batch
      // 启动状态轮询
      this.startStatusPolling(newDocument.id, batch)
    } catch (error) {
      this.handleUploadError(error)
    }
  }

  submitForm() {
    this.knowledgeForm.validate(async (valid) => {
      if (valid) {
        this.loading = true;

        if (this.isEditing) {
          update(this.form).then(res => {
            this.$message.success('知识库更新成功');
            this.loadUserKnowlegde();
          }).catch(err => {
            console.error(err);
          });
        } else {
          create(this.form).then(() => {
            this.$message.success('知识库创建成功' + this.form.name);
            this.loadUserKnowlegde();
          }).catch(err => {
            this.$message.error('知识库创建失败,' + err.data.msg);
          });
        }
        this.dialogVisible = false;
        this.loading = false;
      }
    });
  }

  viewFile(file) {
    this.fileOptions.dialogVisible = true;
    this.fileOptions.type = file.fileType;
    this.fileOptions.title = file.fileName;
    this.$set(this.fileOptions, 'url', file.download_url);

  }
  private handleSearch() {
    if (this.searchDebounce) {
      clearTimeout(this.searchDebounce);
    }
    this.searchDebounce = window.setTimeout(() => {
      this.currentPage = 1;
      this.loadDocuments();
    }, 500);
  }

  private handleResetSearch() {
    this.searchKeyword = '';
    this.handleSearch();
  }

  private startStatusPolling(documentId: string, batch: string) {
    //const datasetId: any = process.env.VUE_APP_DATASET_ID
    const datasetId: any = this.currentKnowledge.code; // 从配置获取
    this.$message.info('开始轮询状态...')
    // 每隔3秒查询一次文档的状态，直到完成或出错为止
    const timer = window.setInterval(async () => {
      try {
        const doc: any = await getDocumentStatus(datasetId, documentId, batch)
        this.fileList = this.fileList.map((file: any) => {
          if (file.id === documentId) {
            return {
              ...file,
              indexing_status: doc?.indexing_status || file.indexing_status,
              progress: doc?.completed_segments
                ? Math.round((doc.completed_segments / doc.total_segments) * 100)
                : file.progress,
              display_status: doc?.display_status || file.display_status
            }
          }
          return file
        })

        if (['completed', 'error'].includes(doc?.indexing_status)) {
          clearInterval(timer)
        }
      } catch (error) {
        console.error('状态查询失败', error)
        clearInterval(timer)
      }
    }, 3000)
  }


  // 错误处理
  private handleUploadError(error: any) {
    const defaultMsg = '文件上传失败'
    if (error.response) {
      const code = error.response.data.code
      const messageMap: { [key: string]: string } = {
        'file_too_large': '文件大小超过限制',
        'unsupported_file_type': '不支持的文件类型',
        'invalid_process_rule': '处理规则配置错误',
        'dataset_not_ready': '知识库尚未准备就绪'
      }
      this.$message.error(messageMap[code] || error.response.data.message || defaultMsg)
    } else {
      this.$message.error(defaultMsg)
    }
  }

  private beforeUpload(file: ElUploadInternalRawFile): boolean {
    return true;
  }


  // 删除文档
  private async handleDelete(row: FileItem) {
    try {
      //const datasetId: any = process.env.VUE_APP_DATASET_ID; // 从配置获取
      const datasetId: any = this.currentKnowledge.code; // 从配置获取

      await this.$confirm('确定删除该文件吗？', '提示', { type: 'warning' });
      await deleteDocument(datasetId, row.id);
      this.fileList = this.fileList.filter(file => file.id !== row.id);
      this.$message.success('删除成功');
      if (this.fileList.length === 0 && this.currentPage > 1) {
        this.currentPage--;
      }
      this.loadDocuments();
    } catch (error) {
      console.error('删除失败:', error);
    }
  }

  // 下载文档
  private async handleDownload(row: FileItem) {
    try {
      if (!row.download_url) {
        // 如果列表中没有预先获取下载链接，实时获取
        //const datasetId: any = process.env.VUE_APP_DATASET_ID;
        const datasetId: any = this.currentKnowledge.code;
        const res = await getDocumentFile(datasetId, row.id);
        row.download_url = res.data.download_url;
      }

      const link = document.createElement('a');
      link.href = row.download_url;
      link.setAttribute('download', row.fileName);
      link.style.display = 'none';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);

      // 跟踪下载事件
      this.trackDownloadEvent(row);
    } catch (error) {
      this.$message.error(`下载失败: ${this.getErrorMessage(error)}`);
    }
  }

  private getErrorMessage(error: any): string {
    if (error.response) {
      switch (error.response.status) {
        case 404: return '文件不存在';
        case 403: return '无下载权限';
        default: return error.response.data.message || '服务器错误';
      }
    }
    return '网络连接失败';
  }


  // 在组件中
  private previewLoadingMap: Record<string, boolean> = {};


  private async handlePreview(row: FileItem) {
    this.viewFile(row);
  }


  // 在组件创建时恢复状态
  created() {
    const savedState = this.$store.state.pageState;
    if (savedState) {
      this.currentPage = savedState.page;
      this.pageSize = savedState.size;
    }
    //this.loadDocuments();
  }
  // 组件挂载时加载数据
  async mounted() {
    this.loadUserKnowlegde();
    this.loadDocuments();

    // 从本地存储恢复状态
    const savedState = localStorage.getItem('sidebarCollapsed');
    if (savedState) {
      this.isSidebarCollapsed = JSON.parse(savedState);
    }
  }

  private loadUserKnowlegde() {
    getUserKnowledge({}).then((res: any) => {
      this.knowledgeList = res.data;
      console.log(res)
    }).catch((error) => {
      console.error('加载用户知识库失败:', error);
    });
  }

  private handlePageChange(newPage: number) {
    this.currentPage = newPage;
    this.loadDocuments();
  }

  // 每页数量改变处理
  private handleSizeChange(newSize: number) {
    this.pageSize = newSize;
    this.currentPage = 1; // 重置到第一页
    this.loadDocuments();
  }
  // 加载文档列表
  private async loadDocuments() {
    try {
      // const datasetId: any = process.env.VUE_APP_DATASET_ID;
      if(!this.currentKnowledge) return;


      const datasetId: any = this.currentKnowledge.code ;
      if(!datasetId) return;

      // 从配置获取
      const res: any = await getDocuments(datasetId, {
        page: this.currentPage,
        keyword: this.searchKeyword,
        limit: this.pageSize // 根据分页需求调整
      });


      this.fileList = await Promise.all(res.data?.data.map(async (file: any) => {
        // 获取文件详细信息
        const fileInfo = await getDocumentFile(datasetId, file.id);
        console.log(fileInfo.data)
        return {
          id: file.id,
          document_id: file.id, // 确保文档ID正确
          fileName: file.name,
          fileSize: file.data_source_detail_dict.upload_file.size,
          uploadTime: new Date(file.created_at * 1000).toLocaleString(),
          fileType: file.data_source_detail_dict.upload_file.extension,
          mongoFileId: file.id,
          indexing_status: file.indexing_status,
          progress: this.calculateProgress(file.indexing_status), // 添加进度字段
          display_status: file.display_status, // 添加显
          download_url: `http://${process.env.VUE_APP_DIFY_HOST}${fileInfo.data.download_url}`,
          preview_url: `http://${process.env.VUE_APP_DIFY_HOST}${fileInfo.data.url}`
        };
      }));

      this.total = res.data.total || 0;
    } catch (error) {

      this.$message.error(error);
    }
  }

  // 确认删除
  confirmDelete(row) {
    this.$confirm(`确定要删除知识库 "${row.name}" 吗？`, '删除确认', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async () => {
      this.loading = true;
      try {
        // 模拟 API 请求
        remove(row).then(() => {
            this.knowledgeList = this.knowledgeList.filter(item => item.id !== row.id);
          this.$message.success('知识库已删除');
          this.loading = false;
        });

      } catch (error) {
        this.loading = false;
        this.$message.error('删除失败');
      }
    }).catch(() => {
      console.log(1)
    });
  }
  private trackDownloadEvent(file: FileItem) {
    // 添加下载统计逻辑
    console.log('文件下载记录:', {
      id: file.id,
      name: file.fileName,
      size: file.fileSize,
      time: new Date().toISOString()
    });
  }

  beforeRouteLeave(to, from, next) {
    this.$store.commit('savePageState', {
      page: this.currentPage,
      size: this.pageSize
    });
    next();
  }


  // 进度计算逻辑
  private calculateProgress(status: string): number {
    const statusOrder = [
      'queuing',
      'parsing',
      'cleaning',
      'splitting',
      'indexing',
      'completed'
    ]
    const currentStep = statusOrder.indexOf(status)
    return currentStep >= 0
      ? Math.round((currentStep / (statusOrder.length - 1)) * 100)
      : 0
  }
}
</script>

<style lang="scss" scoped>
.doc-container {

  margin: 0px 10px;
  padding: 0px;
}

.file-list {
  display: flex;
  flex-wrap: wrap;

  margin: -10px; // 抵消gutter间距
  margin-top: 10px;

  .file-item {
    height: 100%;
    padding: 5px; // 与gutter对应
    display: flex;

    // 不同屏幕尺寸下的宽度
    @media (min-width: 1920px) {
      width: 20%;
    }

    @media (min-width: 1200px) and (max-width: 1919px) {
      width: 25%;
    }

    @media (min-width: 992px) and (max-width: 1199px) {
      width: 24.333%;
    }

    @media (min-width: 768px) and (max-width: 991px) {
      width: 50%;
    }

    @media (max-width: 767px) {
      width: 100%;
    }

    >div {
      width: 100%; // 确保卡片撑满容器
    }
  }
}


.main-container {
  display: flex;
  height: 100vh;
  padding: 0px;
}

.knowledge-sidebar {
  position: relative;
  width: 200px; /* 正常宽度 */
  transition: width 0.3s ease;
  
  &.collapsed {
    width: 0px; /* 折叠后宽度 */
    
    .sidebar-content {
      opacity: 0;
      pointer-events: none;
    }
  }
  
  .collapse-btn {
    position: absolute;
    top: 0px;
    right: -20px;
    width: 20px;
    height: 44px;
    background: #fff;
    border: 1px solid #ebeef5;
    border-left: none;
    border-radius: 0 4px 4px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    
    i {
      font-size: 16px;
      color: #606266;
    }
    
    &:hover {
      background: #f5f7fa;
      i {
        color: #409eff;
      }
    }
  }
  
  .sidebar-content {
    transition: opacity 0.2s ease;
    width: 100%;
    height: 100%;
    overflow-y: auto;
  }
}


.doc-container {
  flex: 1;
  margin-left: 1px;
  padding: 0px;
  background: white;
  border-radius: 6px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  @media (max-width: 768px) {
    margin-left: 0;
    padding: 15px;
  }
}

.el-pagination {

  ::v-deep .btn-prev,
  ::v-deep .btn-next,
  ::v-deep .el-pager li {
    border-radius: 4px;
    margin: 0 3px;
  }

  ::v-deep .el-pagination__jump {
    margin-left: 10px;
  }
}


.compact-upload {
  height: 50px;
  display: flex;
  align-items: right;
  justify-content: left;
  margin: 20px 0;
  position: relative;

  ::v-deep .el-upload {
    width: auto;
    height: 100%;
    display: flex;
    align-items: center;
  }

  .upload-btn {
    height: 40px;
    padding: 0 25px;
    border-radius: 8px;
    font-size: 14px;

    i {
      margin-right: 8px;
    }
  }

  .el-upload__tip {
    position: absolute;
    bottom: -22px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 12px;
    color: #909399;
  }
}

::v-deep .el-card .el-card__header{
  padding: 2px;
}

// 调整头部布局
.el-card__header>div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;


  // 响应式处理
  @media (max-width: 768px) {
    flex-wrap: wrap;
    height: auto !important;
    padding: 15px;

    .el-input {
      width: 100% !important;
      margin-bottom: 10px;
    }
  }
}

// 调整搜索框样式
.el-input-group__append {
  background-color: #409EFF;
  border-color: #409EFF;

  .el-button {
    color: white;
    padding: 0 15px;

    &:hover {
      background-color: rgba(255, 255, 255, 0.1);
    }
  }
}


.knowledge-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 0px 10px;

  border-bottom: 1px solid #ebeef5;
}

.knowledge-title h3 {
  font-size: 16px;
  color: #303133;
}

.knowledge-card {
  border: 1px solid #ebeef5;
  border-radius: 6px;
  padding: 15px;
  transition: all 0.3s;
  position: relative;

  .card-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    opacity: 0;  // 初始不可见
    transition: opacity 0.3s ease; // 添加过渡效果
    pointer-events: none; // 初始不可点击
  }
  
  &:hover {
    .card-actions {
      opacity: 1; // 悬停时显示
      pointer-events: auto; // 允许点击
    }
  }
}

.knowledge-card:hover {
  border-color: #409eff;
  box-shadow: 0 2px 12px 0 rgba(64, 158, 255, 0.1);
}

.knowledge-card.active {
  border-color: #409eff;
  background-color: #ecf5ff;
}

.knowledge-card .card-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.knowledge-card .card-header i {
  font-size: 20px;
  margin-right: 10px;
  color: #409eff;
}

.knowledge-card .card-header .card-title {
  font-weight: bold;
  font-size: 15px;
  color: #303133;
}

.knowledge-card .card-content {
  margin-bottom: 15px;
}

.knowledge-card .card-meta {
  font-size: 13px;
  color: #909399;
  display: flex;
  gap: 10px;
  margin-bottom: 5px;
}

.knowledge-card .card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.current-knowledge{
  padding: 10px;
  font-size: 12px;
}
</style>